<template>
	<view>
		<u-modal v-model="show" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
			<view class="">
				<view class="title_box">我要报菜名</view>
				<view class="dish_box">
					<text class="subtitle">报上您想吃的饭菜，或许会有惊喜喔~</text>
					<view class="input_title">我喜欢</view>
					<view class="input_box">
						<u-input
							v-model="value"
							type="textarea"
							:border="true"
							:height="120"
							:auto-height="true"
							:clearable="false"
							placeholder="描述您想吃的美食，比如：我想吃豆花，咸豆花，豆花要白如凝脂，入口即化。"
							:maxlength="100"
						/>
					</view>
					<view class="btn">
						<u-button type="warning" @click="submitBtn">马上给厨师报菜单！</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { indexCombowant } from '@/api/index'

export default {
	name: 'ProvideDish',
	data() {
		return {
			show: false,
			value: ''
		}
	},
	methods: {
		showModal() {
			this.show = true
			this.value = ''
		},
		async submitBtn() {
			await indexCombowant({ comboDesc: this.value })
			this.showToast('已提交给厨师~')
			this.show = false
		}
	}
}
</script>

<style lang="less" scoped>
.title_box {
	font-size: 36rpx;
	color: #101010;
	text-align: center;
	margin-top: 25rpx;
}

.dish_box {
	margin-top: 30rpx;
	padding: 0 40rpx;
	padding-bottom: 45rpx;

	.subtitle {
		font-size: 24rpx;
		color: #888;
	}

	.input_title {
		font-size: 28rpx;
		color: #101010;
		margin-top: 26rpx;
	}

	.input_box {
		margin-top: 20rpx;
	}

	.btn {
		margin-top: 30rpx;
	}
}
</style>
